<!--
 * @Author: Aster lipian1004@163.com
 * @Date: 2023-10-07 17:22:47
 * @FilePath: \aster-admin\src\components\lunar\almanac.vue
 * @Description: 黄历
 * Copyright (c) 2024 by Aster, All Rights Reserved.
-->
<template>
  <div class="almanac">
    <div class="border-right">
      <div class="row col border-bottom">
        <div class="label">{{ state.yearGanZhi }}{{ I18n.getMessage('label.nian') }}</div>
        <div>{{ I18n.getMessage('my.shu') }}{{ state.yearShengXiao }}</div>
        <div>{{ state.yearNaYin }}</div>
      </div>
      <div class="row col border-bottom">
        <div class="label">{{ state.monthGanZhi }}{{ I18n.getMessage('label.yue') }}</div>
        <div>{{ I18n.getMessage('my.shu') }}{{ state.monthShengXiao }}</div>
        <div>{{ state.monthNaYin }}</div>
      </div>
      <div class="row col border-bottom">
        <div class="label">{{ state.dayGanZhi }}{{ I18n.getMessage('label.ri') }}</div>
        <div>{{ I18n.getMessage('my.shu') }}{{ state.dayShengXiao }}</div>
        <div>{{ state.dayNaYin }}</div>
      </div>
      <div class="row col bg border-bottom">
        <div>{{ I18n.getMessage('my.jieQi') }}{{ state.prevJq }}</div>
      </div>
      <div class="yj-container border-bottom">
        <div class="yj yi">宜</div>
        <ul>
          <li v-for="(o, i) in state.dayYi" :key="i">{{ o }}</li>
        </ul>
      </div>
      <div class="border-bottom js">
        <div>
          <div class="label">{{ I18n.getMessage('label.jiShen') }}</div>
          <ul>
            <li v-for="(o, i) in state.dayJiShen" :key="i">{{ o }}</li>
          </ul>
        </div>
      </div>
      <div class="row col bg">
        <div class="label">彭祖</div>
        <div>{{ state.pengZuGan }}</div>
      </div>
      <div class="row col bg border-bottom">
        <div class="label">百忌</div>
        <div>{{ state.pengZuZhi }}</div>
      </div>
      <div class="row col">
        <div class="label">月名</div>
        <div>{{ state.yueMing }}</div>
      </div>
      <div class="row col">
        <div class="label">月相</div>
        <div>{{ state.yueXiang }}月</div>
      </div>
      <div class="row col">
        <div class="label">物候</div>
        <div>{{ state.wuHou }}</div>
      </div>
    </div>
    <div class="center border-right bg">
      <div class="border-bottom">
        <div class="inputs">
          <div> <input v-model="model.year" />年 </div>
          <div>
            <select v-model="model.month">
              <option :value="i" v-for="i in 12" :key="i">{{ i }}</option> </select
            >月
          </div>
          <div> <input v-model="model.day" />日 </div>
        </div>
        <div>
          <div
            >{{ I18n.getMessage('label.gongLi') }} {{ state.year
            }}{{ I18n.getMessage('label.nian') }} {{ state.month
            }}{{ I18n.getMessage('label.yue') }} {{ state.day }}{{ I18n.getMessage('label.ri') }}
            {{ I18n.getMessage('my.week') }}{{ state.weekInChinese }} {{ state.xingZuo
            }}{{ I18n.getMessage('my.xingZuo') }}
          </div>
          <div class="today">
            <a href="javascript:void(0);" class="prev" @click="prevDay"></a>
            {{ state.day }}
            <a href="javascript:void(0);" class="next" @click="nextDay"></a>
          </div>
          <div class="lunar"
            >{{ I18n.getMessage('label.nongLi') }} {{ state.lunarYearInChinese
            }}{{ I18n.getMessage('label.nian') }} {{ state.lunarMonthInChinese
            }}{{ I18n.getMessage('label.yue') }} {{ state.lunarDayInChinese }}</div
          >
        </div>
      </div>
      <div class="grid border-bottom">
        <div class="col2 border-right">
          <div class="bar">{{ I18n.getMessage('label.caiShen') }}</div>
          <div>
            <div class="row col">
              <div class="label">喜神</div>
              <div>{{ state.positionXi }}</div>
            </div>
            <div class="row col">
              <div class="label">福神</div>
              <div>{{ state.positionFu }}</div>
            </div>
            <div class="row col">
              <div class="label">财神</div>
              <div>{{ state.positionCai }}</div>
            </div>
          </div>
        </div>
        <div class="col2">
          <div class="bar">{{ I18n.getMessage('label.yinYang') }}</div>
          <div>
            <div class="row col">
              <div class="label">阳贵神</div>
              <div>{{ state.positionYangGui }}</div>
            </div>
            <div class="row col">
              <div class="label">阴贵神</div>
              <div>{{ state.positionYinGui }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="grid">
        <div class="col2 border-right">
          <div class="bar">空亡所值</div>
          <div>
            <div class="row col">
              <div class="label">{{ I18n.getMessage('label.nian') }}</div>
              <div>{{ state.yearKongWang }}</div>
            </div>
            <div class="row col">
              <div class="label">{{ I18n.getMessage('label.yue') }}</div>
              <div>{{ state.monthKongWang }}</div>
            </div>
            <div class="row col">
              <div class="label">{{ I18n.getMessage('label.ri') }}</div>
              <div>{{ state.dayKongWang }}</div>
            </div>
          </div>
        </div>
        <div class="col2">
          <div class="bar">{{ I18n.getMessage('label.jiuGong') }}</div>
          <div>
            <div class="row col">
              <div class="label">九星</div>
              <div>{{ state.dayJiuXing }}</div>
            </div>
            <div class="row col">
              <div class="label">二十八宿</div>
              <div>{{ state.xiu }}</div>
            </div>
            <div class="row col">
              <div>{{ state.yearZhiShui }}</div>
              <div>{{ state.yearDeJin }}</div>
            </div>
            <div class="row col">
              <div>{{ state.yearFenBing }}</div>
              <div>{{ state.yearGenTian }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="row col border-bottom">
        <div class="label">相冲</div>
        <div> {{ state.dayChong }}</div>
      </div>
      <div class="row col border-bottom">
        <div class="label">值神</div>
        <div> {{ state.dayZhiShen }}</div>
      </div>
      <div class="row col border-bottom">
        <div class="label">十二神</div>
        <div> {{ state.dayTianShen }}</div>
      </div>
      <div class="row col bg border-bottom">
        <div>{{ I18n.getMessage('my.jieQi') }}{{ state.nextJq }}</div>
      </div>
      <div class="yj-container border-bottom">
        <div class="yj ji">忌</div>
        <ul>
          <li v-for="(o, i) in state.dayJi" :key="i">{{ o }}</li>
        </ul>
      </div>
      <div class="border-bottom js">
        <div>
          <div class="label">{{ I18n.getMessage('label.xiongSha') }}</div>
          <ul>
            <li v-for="(o, i) in state.dayXiongSha" :key="i">{{ o }}</li>
          </ul>
        </div>
      </div>
      <div class="row col bg">
        <div class="label">本月胎神</div>
        <div>{{ state.monthTaiShen }}</div>
      </div>
      <div class="row col bg border-bottom">
        <div class="label">今日胎神</div>
        <div>{{ state.dayTaiShen }}</div>
      </div>

      <div class="row col">
        <div class="label">{{ I18n.getMessage('label.suiSha') }}</div>
        <div>{{ I18n.getMessage('my.suiSha') }}{{ state.daySha }}</div>
      </div>
      <div class="row col">
        <div class="label">六曜</div>
        <div>{{ state.liuYao }}</div>
      </div>
      <div class="row col">
        <div class="label">日禄</div>
        <div>{{ state.dayLu }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive } from 'vue';
  import { Solar, LunarYear, I18n } from 'lunar-typescript';

  I18n.setMessages('chs', {
    'my.shu': '属',
    'my.jieQi': '节气',
    'my.week': '星期',
    'my.xingZuo': '座',
    'my.suiSha': '岁煞',
    'my.zhou': '周',
    'label.gongLi': '公历',
    'label.nongLi': '农历',
    'label.nian': '年',
    'label.yue': '月',
    'label.ri': '日',
    'label.suiSha': '岁煞',
    'label.jiShen': '吉神宜趋',
    'label.xiongSha': '凶煞宜忌',
    'label.caiShen': '财神位',
    'label.yinYang': '阴阳贵神',
    'label.jiuGong': '九宫飞星',
  });

  I18n.setMessages('en', {
    'my.shu': ' ',
    'my.jieQi': ' ',
    'my.week': ' ',
    'my.xingZuo': ' ',
    'my.suiSha': ' ',
    'my.zhou': ' ',
    'label.gongLi': 'Solar',
    'label.nongLi': 'Lunar',
    'label.nian': 'Year',
    'label.yue': 'Month',
    'label.ri': 'Day',
  });

  I18n.setMessages('cht', {
    'my.shu': '屬',
    'my.jieQi': '節氣',
    'my.suiSha': '歲煞',
    'label.gongLi': '西歴',
    'label.nongLi': '夏歴',
    'label.suiSha': '歲煞',
    'label.jiShen': '吉神宜趨',
    'label.xiongSha': '兇煞宜忌',
    'label.caiShen': '財神位',
    'label.yinYang': '陰陽貴神',
    'label.jiuGong': '九宮飛星',
  });

  I18n.setMessages('cht', {
    'tg.jia': '甲',
    'tg.yi': '乙',
    'tg.bing': '丙',
    'tg.ding': '丁',
    'tg.wu': '戊',
    'tg.ji': '己',
    'tg.geng': '庚',
    'tg.xin': '辛',
    'tg.ren': '壬',
    'tg.gui': '癸',
    'dz.zi': '子',
    'dz.chou': '醜',
    'dz.yin': '寅',
    'dz.mao': '卯',
    'dz.chen': '辰',
    'dz.si': '巳',
    'dz.wu': '午',
    'dz.wei': '未',
    'dz.shen': '申',
    'dz.you': '酉',
    'dz.xu': '戌',
    'dz.hai': '亥',
    'zx.jian': '建',
    'zx.chu': '除',
    'zx.man': '滿',
    'zx.ping': '平',
    'zx.ding': '定',
    'zx.zhi': '執',
    'zx.po': '破',
    'zx.wei': '危',
    'zx.cheng': '成',
    'zx.shou': '收',
    'zx.kai': '開',
    'zx.bi': '閉',
    'jz.jiaZi': '甲子',
    'jz.yiChou': '乙醜',
    'jz.bingYin': '丙寅',
    'jz.dingMao': '丁卯',
    'jz.wuChen': '戊辰',
    'jz.jiSi': '己巳',
    'jz.gengWu': '庚午',
    'jz.xinWei': '辛未',
    'jz.renShen': '壬申',
    'jz.guiYou': '癸酉',
    'jz.jiaXu': '甲戌',
    'jz.yiHai': '乙亥',
    'jz.bingZi': '丙子',
    'jz.dingChou': '丁醜',
    'jz.wuYin': '戊寅',
    'jz.jiMao': '己卯',
    'jz.gengChen': '庚辰',
    'jz.xinSi': '辛巳',
    'jz.renWu': '壬午',
    'jz.guiWei': '癸未',
    'jz.jiaShen': '甲申',
    'jz.yiYou': '乙酉',
    'jz.bingXu': '丙戌',
    'jz.dingHai': '丁亥',
    'jz.wuZi': '戊子',
    'jz.jiChou': '己醜',
    'jz.gengYin': '庚寅',
    'jz.xinMao': '辛卯',
    'jz.renChen': '壬辰',
    'jz.guiSi': '癸巳',
    'jz.jiaWu': '甲午',
    'jz.yiWei': '乙未',
    'jz.bingShen': '丙申',
    'jz.dingYou': '丁酉',
    'jz.wuXu': '戊戌',
    'jz.jiHai': '己亥',
    'jz.gengZi': '庚子',
    'jz.xinChou': '辛醜',
    'jz.renYin': '壬寅',
    'jz.guiMao': '癸卯',
    'jz.jiaChen': '甲辰',
    'jz.yiSi': '乙巳',
    'jz.bingWu': '丙午',
    'jz.dingWei': '丁未',
    'jz.wuShen': '戊申',
    'jz.jiYou': '己酉',
    'jz.gengXu': '庚戌',
    'jz.xinHai': '辛亥',
    'jz.renZi': '壬子',
    'jz.guiChou': '癸醜',
    'jz.jiaYin': '甲寅',
    'jz.yiMao': '乙卯',
    'jz.bingChen': '丙辰',
    'jz.dingSi': '丁巳',
    'jz.wuWu': '戊午',
    'jz.jiWei': '己未',
    'jz.gengShen': '庚申',
    'jz.xinYou': '辛酉',
    'jz.renXu': '壬戌',
    'jz.guiHai': '癸亥',
    'sx.rat': '鼠',
    'sx.ox': '牛',
    'sx.tiger': '虎',
    'sx.rabbit': '兔',
    'sx.dragon': '龍',
    'sx.snake': '蛇',
    'sx.horse': '馬',
    'sx.goat': '羊',
    'sx.monkey': '猴',
    'sx.rooster': '雞',
    'sx.dog': '狗',
    'sx.pig': '豬',
    'dw.long': '龍',
    'dw.niu': '牛',
    'dw.gou': '狗',
    'dw.yang': '羊',
    'dw.tu': '兔',
    'dw.shu': '鼠',
    'dw.ji': '雞',
    'dw.ma': '馬',
    'dw.hu': '虎',
    'dw.zhu': '豬',
    'dw.hou': '猴',
    'dw.she': '蛇',
    'dw.huLi': '狐',
    'dw.yan': '燕',
    'dw.bao': '豹',
    'dw.yuan': '猿',
    'dw.yin': '蚓',
    'dw.lu': '鹿',
    'dw.wu': '烏',
    'dw.jiao': '蛟',
    'dw.lang': '狼',
    'dw.fu': '蝠',
    'dw.zhang': '獐',
    'dw.xu': '獝',
    'dw.xie': '獬',
    'dw.han': '犴',
    'dw.he': '貉',
    'dw.zhi': '彘',
    'wx.jin': '金',
    'wx.mu': '木',
    'wx.shui': '水',
    'wx.huo': '火',
    'wx.tu': '土',
    'wx.ri': '日',
    'wx.yue': '月',
    'n.zero': '〇',
    'n.one': '一',
    'n.two': '二',
    'n.three': '三',
    'n.four': '四',
    'n.five': '五',
    'n.six': '六',
    'n.seven': '七',
    'n.eight': '八',
    'n.nine': '九',
    'n.ten': '十',
    'n.eleven': '十一',
    'n.twelve': '十二',
    'd.one': '初一',
    'd.two': '初二',
    'd.three': '初三',
    'd.four': '初四',
    'd.five': '初五',
    'd.six': '初六',
    'd.seven': '初七',
    'd.eight': '初八',
    'd.nine': '初九',
    'd.ten': '初十',
    'd.eleven': '十一',
    'd.twelve': '十二',
    'd.thirteen': '十三',
    'd.fourteen': '十四',
    'd.fifteen': '十五',
    'd.sixteen': '十六',
    'd.seventeen': '十七',
    'd.eighteen': '十八',
    'd.nighteen': '十九',
    'd.twenty': '二十',
    'd.twentyOne': '廿一',
    'd.twentyTwo': '廿二',
    'd.twentyThree': '廿三',
    'd.twentyFour': '廿四',
    'd.twentyFive': '廿五',
    'd.twentySix': '廿六',
    'd.twentySeven': '廿七',
    'd.twentyEight': '廿八',
    'd.twentyNine': '廿九',
    'd.thirty': '三十',
    'm.one': '正',
    'm.two': '二',
    'm.three': '三',
    'm.four': '四',
    'm.five': '五',
    'm.six': '六',
    'm.seven': '七',
    'm.eight': '八',
    'm.nine': '九',
    'm.ten': '十',
    'm.eleven': '冬',
    'm.twelve': '臘',
    'w.sun': '日',
    'w.mon': '一',
    'w.tues': '二',
    'w.wed': '三',
    'w.thur': '四',
    'w.fri': '五',
    'w.sat': '六',
    'xz.aries': '白羊',
    'xz.taurus': '金牛',
    'xz.gemini': '雙子',
    'xz.cancer': '巨蟹',
    'xz.leo': '獅子',
    'xz.virgo': '處女',
    'xz.libra': '天秤',
    'xz.scorpio': '天蠍',
    'xz.sagittarius': '射手',
    'xz.capricornus': '摩羯',
    'xz.aquarius': '水瓶',
    'xz.pisces': '雙魚',
    'bg.qian': '乾',
    'bg.kun': '坤',
    'bg.zhen': '震',
    'bg.xun': '巽',
    'bg.kan': '坎',
    'bg.li': '離',
    'bg.gen': '艮',
    'bg.dui': '兌',
    'ps.center': '中',
    'ps.dong': '東',
    'ps.nan': '南',
    'ps.xi': '西',
    'ps.bei': '北',
    'ps.zhong': '中宮',
    'ps.zhengDong': '正東',
    'ps.zhengNan': '正南',
    'ps.zhengXi': '正西',
    'ps.zhengBei': '正北',
    'ps.dongBei': '東北',
    'ps.dongNan': '東南',
    'ps.xiBei': '西北',
    'ps.xiNan': '西南',
    'ps.wai': '外',
    'ps.fangNei': '房內',
    'jq.dongZhi': '冬至',
    'jq.xiaoHan': '小寒',
    'jq.daHan': '大寒',
    'jq.liChun': '立春',
    'jq.yuShui': '雨水',
    'jq.jingZhe': '驚蟄',
    'jq.chunFen': '春分',
    'jq.qingMing': '清明',
    'jq.guYu': '谷雨',
    'jq.liXia': '立夏',
    'jq.xiaoMan': '小滿',
    'jq.mangZhong': '芒種',
    'jq.xiaZhi': '夏至',
    'jq.xiaoShu': '小暑',
    'jq.daShu': '大暑',
    'jq.liQiu': '立秋',
    'jq.chuShu': '處暑',
    'jq.baiLu': '白露',
    'jq.qiuFen': '秋分',
    'jq.hanLu': '寒露',
    'jq.shuangJiang': '霜降',
    'jq.liDong': '立冬',
    'jq.xiaoXue': '小雪',
    'jq.daXue': '大雪',
    'sn.qingLong': '青龍',
    'sn.baiHu': '白虎',
    'sn.zhuQue': '朱雀',
    'sn.xuanWu': '玄武',
    'sn.mingTang': '明堂',
    'sn.tianXing': '天刑',
    'sn.tianDe': '天德',
    'sn.jinKui': '金匱',
    'sn.yuTang': '玉堂',
    'sn.siMing': '司命',
    'sn.tianLao': '天牢',
    'sn.gouChen': '勾陳',
    'sn.tianEn': '天恩',
    'sn.muCang': '母倉',
    'sn.shiYang': '時陽',
    'sn.shengQi': '生氣',
    'sn.yiHou': '益後',
    'sn.zaiSha': '災煞',
    'sn.tianHuo': '天火',
    'sn.siJi': '四忌',
    'sn.baLong': '八龍',
    'sn.fuRi': '復日',
    'sn.xuShi': '續世',
    'sn.yueSha': '月煞',
    'sn.yueXu': '月虛',
    'sn.xueZhi': '血支',
    'sn.tianZei': '天賊',
    'sn.wuXu': '五虛',
    'sn.tuFu': '土符',
    'sn.guiJi': '歸忌',
    'sn.xueJi': '血忌',
    'sn.yueDe': '月德',
    'sn.yueEn': '月恩',
    'sn.siXiang': '四相',
    'sn.wangRi': '王日',
    'sn.tianCang': '天倉',
    'sn.buJiang': '不將',
    'sn.wuHe': '五合',
    'sn.mingFeiDui': '鳴吠對',
    'sn.yueJian': '月建',
    'sn.xiaoShi': '小時',
    'sn.tuHu': '土府',
    'sn.wangWang': '往亡',
    'sn.yaoAn': '要安',
    'sn.siShen': '死神',
    'sn.tianMa': '天馬',
    'sn.jiuHu': '九虎',
    'sn.qiNiao': '七鳥',
    'sn.liuShe': '六蛇',
    'sn.guanRi': '官日',
    'sn.jiQi': '吉期',
    'sn.yuYu': '玉宇',
    'sn.daShi': '大時',
    'sn.daBai': '大敗',
    'sn.xianChi': '鹹池',
    'sn.shouRi': '守日',
    'sn.tianWu': '天巫',
    'sn.fuDe': '福德',
    'sn.liuYi': '六儀',
    'sn.jinTang': '金堂',
    'sn.yanDui': '厭對',
    'sn.zhaoYao': '招搖',
    'sn.jiuKong': '九空',
    'sn.jiuKan': '九坎',
    'sn.jiuJiao': '九焦',
    'sn.xiangRi': '相日',
    'sn.baoGuang': '寶光',
    'sn.tianGang': '天罡',
    'sn.yueXing': '月刑',
    'sn.yueHai': '月害',
    'sn.youHuo': '遊禍',
    'sn.chongRi': '重日',
    'sn.shiDe': '時德',
    'sn.minRi': '民日',
    'sn.sanHe': '三合',
    'sn.linRi': '臨日',
    'sn.shiYin': '時陰',
    'sn.mingFei': '鳴吠',
    'sn.siQi': '死氣',
    'sn.diNang': '地囊',
    'sn.yueDeHe': '月德合',
    'sn.jingAn': '敬安',
    'sn.puHu': '普護',
    'sn.jieShen': '解神',
    'sn.xiaoHao': '小耗',
    'sn.tianDeHe': '天德合',
    'sn.yueKong': '月空',
    'sn.yiMa': '驛馬',
    'sn.tianHou': '天後',
    'sn.chuShen': '除神',
    'sn.yuePo': '月破',
    'sn.daHao': '大耗',
    'sn.wuLi': '五離',
    'sn.yinDe': '陰德',
    'sn.fuSheng': '福生',
    'sn.tianLi': '天吏',
    'sn.zhiSi': '致死',
    'sn.yuanWu': '元武',
    'sn.yangDe': '陽德',
    'sn.tianXi': '天喜',
    'sn.tianYi': '天醫',
    'sn.yueYan': '月厭',
    'sn.diHuo': '地火',
    'sn.fourHit': '四擊',
    'sn.daSha': '大煞',
    'sn.daHui': '大會',
    'sn.tianYuan': '天願',
    'sn.liuHe': '六合',
    'sn.wuFu': '五富',
    'sn.shengXin': '聖心',
    'sn.heKui': '河魁',
    'sn.jieSha': '劫煞',
    'sn.siQiong': '四窮',
    'sn.chuShuiLong': '觸水龍',
    'sn.baFeng': '八風',
    'sn.tianShe': '天赦',
    'sn.wuMu': '五墓',
    'sn.baZhuan': '八專',
    'sn.yinCuo': '陰錯',
    'sn.siHao': '四耗',
    'sn.yangCuo': '陽錯',
    'sn.siFei': '四廢',
    'sn.sanYin': '三陰',
    'sn.xiaoHui': '小會',
    'sn.yinDaoChongYang': '陰道沖陽',
    'sn.danYin': '單陰',
    'sn.guChen': '孤辰',
    'sn.yinWei': '陰位',
    'sn.xingHen': '行狠',
    'sn.liaoLi': '了戾',
    'sn.jueYin': '絕陰',
    'sn.chunYang': '純陽',
    'sn.suiBo': '歲薄',
    'sn.yinYangJiaoPo': '陰陽交破',
    'sn.yinYangJuCuo': '陰陽俱錯',
    'sn.yinYangJiChong': '陰陽擊沖',
    'sn.zhuZhen': '逐陣',
    'sn.yangCuoYinChong': '陽錯陰沖',
    'sn.qiFu': '七符',
    'sn.tianGou': '天狗',
    'sn.chengRi': '成日',
    'sn.tianFu': '天符',
    'sn.guYang': '孤陽',
    'sn.jueYang': '絕陽',
    'sn.chunYin': '純陰',
    'sn.yinShen': '陰神',
    'sn.jieChu': '解除',
    'sn.yangPoYinChong': '陽破陰沖',
    'ss.biJian': '比肩',
    'ss.jieCai': '劫財',
    'ss.shiShen': '食神',
    'ss.shangGuan': '傷官',
    'ss.pianCai': '偏財',
    'ss.zhengCai': '正財',
    'ss.qiSha': '七殺',
    'ss.zhengGuan': '正官',
    'ss.pianYin': '偏印',
    'ss.zhengYin': '正印',
    's.none': '無',
    's.huangDao': '黃道',
    's.heiDao': '黑道',
    's.goodLuck': '吉',
    's.badLuck': '兇',
    's.yin': '陰',
    's.yang': '陽',
    's.white': '白',
    's.black': '黑',
    's.blue': '碧',
    's.green': '綠',
    's.yellow': '黃',
    's.red': '赤',
    's.purple': '紫',
    'jr.chuXi': '除夕',
    'jr.chunJie': '春節',
    'jr.yuanXiao': '元宵節',
    'jr.longTou': '龍頭節',
    'jr.duanWu': '端午節',
    'jr.qiXi': '七夕節',
    'jr.zhongQiu': '中秋節',
    'jr.chongYang': '重陽節',
    'jr.laBa': '臘八節',
    'jr.yuanDan': '元旦節',
    'jr.qingRen': '情人節',
    'jr.fuNv': '婦女節',
    'jr.zhiShu': '植樹節',
    'jr.xiaoFei': '消費者權益日',
    'jr.wuYi': '勞動節',
    'jr.qingNian': '青年節',
    'jr.erTong': '童子節',
    'jr.yuRen': '愚人節',
    'jr.jianDang': '建黨節',
    'jr.jianJun': '建軍節',
    'jr.jiaoShi': '教師節',
    'jr.guoQing': '國慶節',
    'jr.wanShengYe': '萬聖節前夜',
    'jr.wanSheng': '萬聖節',
    'jr.pingAn': '平安夜',
    'jr.shengDan': '耶誕節',
    'ds.changSheng': '長生',
    'ds.muYu': '沐浴',
    'ds.guanDai': '冠帶',
    'ds.linGuan': '臨官',
    'ds.diWang': '帝旺',
    'ds.shuai': '衰',
    'ds.bing': '病',
    'ds.si': '死',
    'ds.mu': '墓',
    'ds.jue': '絕',
    'ds.tai': '胎',
    'ds.yang': '養',
    'h.first': '初候',
    'h.second': '二候',
    'h.third': '三候',
    'h.qiuYinJie': '蚯蚓結',
    'h.miJiao': '麋角解',
    'h.shuiQuan': '水泉動',
    'h.yanBei': '雁北鄉',
    'h.queShi': '鵲始巢',
    'h.zhiShi': '雉始雊',
    'h.jiShi': '雞始乳',
    'h.zhengNiao': '徵鳥厲疾',
    'h.shuiZe': '水澤腹堅',
    'h.dongFeng': '東風解凍',
    'h.zheChongShiZhen': '蟄蟲始振',
    'h.yuZhi': '魚陟負冰',
    'h.taJi': '獺祭魚',
    'h.houYan': '候雁北',
    'h.caoMuMengDong': '草木萌動',
    'h.taoShi': '桃始華',
    'h.cangGeng': '倉庚鳴',
    'h.yingHua': '鷹化為鳩',
    'h.xuanNiaoZhi': '玄鳥至',
    'h.leiNai': '雷乃發聲',
    'h.shiDian': '始電',
    'h.tongShi': '桐始華',
    'h.tianShu': '田鼠化為鴽',
    'h.hongShi': '虹始見',
    'h.pingShi': '萍始生',
    'h.mingJiu': '鳴鳩拂奇羽',
    'h.daiSheng': '戴勝降於桑',
    'h.louGuo': '螻蟈鳴',
    'h.qiuYinChu': '蚯蚓出',
    'h.wangGua': '王瓜生',
    'h.kuCai': '苦菜秀',
    'h.miCao': '靡草死',
    'h.maiQiu': '麥秋至',
    'h.tangLang': '螳螂生',
    'h.juShi': '鵙始鳴',
    'h.fanShe': '反舌無聲',
    'h.luJia': '鹿角解',
    'h.tiaoShi': '蜩始鳴',
    'h.banXia': '半夏生',
    'h.wenFeng': '溫風至',
    'h.xiShuai': '蟋蟀居壁',
    'h.yingShi': '鷹始摯',
    'h.fuCao': '腐草為螢',
    'h.tuRun': '土潤溽暑',
    'h.daYu': '大雨行時',
    'h.liangFeng': '涼風至',
    'h.baiLu': '白露降',
    'h.hanChan': '寒蟬鳴',
    'h.yingNai': '鷹乃祭鳥',
    'h.tianDi': '天地始肅',
    'h.heNai': '禾乃登',
    'h.hongYanLai': '鴻雁來',
    'h.xuanNiaoGui': '玄鳥歸',
    'h.qunNiao': '群鳥養羞',
    'h.leiShi': '雷始收聲',
    'h.zheChongPiHu': '蟄蟲坯戶',
    'h.shuiShiHe': '水始涸',
    'h.hongYanLaiBin': '鴻雁來賓',
    'h.queRu': '雀入大水為蛤',
    'h.juYou': '菊有黃花',
    'h.caiNai': '豺乃祭獸',
    'h.caoMuHuangLuo': '草木黃落',
    'h.zheChongXianFu': '蟄蟲鹹俯',
    'h.shuiShiBing': '水始冰',
    'h.diShi': '地始凍',
    'h.zhiRu': '雉入大水為蜃',
    'h.hongCang': '虹藏不見',
    'h.tianQi': '天氣上升地氣下降',
    'h.biSe': '閉塞而成冬',
    'h.heDan': '鹖鴠不鳴',
    'h.huShi': '虎始交',
    'h.liTing': '荔挺出',
    'ts.zhan': '佔',
    'ts.hu': '戶',
    'ts.win': '窗',
    'ts.fang': '房',
    'ts.chuang': '床',
    'ts.lu': '爐',
    'ts.zao': '竈',
    'ts.dui': '碓',
    'ts.mo': '磨',
    'ts.xi': '棲',
    'ts.chu': '廚',
    'ts.ce': '廁',
    'ts.cang': '倉',
    'ts.cangKu': '倉庫',
    'ts.daMen': '大門',
    'ts.men': '門',
    'ts.tang': '堂',
    'ly.xianSheng': '先勝',
    'ly.xianFu': '先負',
    'ly.youYin': '友引',
    'ly.foMie': '佛滅',
    'ly.daAn': '大安',
    'ly.chiKou': '赤口',
    'yj.jiSi': '祭祀',
    'yj.qiFu': '祈福',
    'yj.qiuSi': '求嗣',
    'yj.kaiGuang': '開光',
    'yj.suHui': '塑繪',
    'yj.qiJiao': '齊醮',
    'yj.zhaiJiao': '齋醮',
    'yj.muYu': '沐浴',
    'yj.chouShen': '酬神',
    'yj.zaoMiao': '造廟',
    'yj.siZhao': '祀竈',
    'yj.fenXiang': '焚香',
    'yj.xieTu': '謝土',
    'yj.chuHuo': '出火',
    'yj.diaoKe': '雕刻',
    'yj.jiaQu': '嫁娶',
    'yj.DingHun': '訂婚',
    'yj.naCai': '納採',
    'yj.wenMing': '問名',
    'yj.naXu': '納婿',
    'yj.guiNing': '歸寧',
    'yj.anChuang': '安床',
    'yj.heZhang': '合帳',
    'yj.guanJi': '冠笄',
    'yj.dingMeng': '訂盟',
    'yj.jinRenKou': '進人口',
    'yj.caiYi': '裁衣',
    'yj.wanMian': '挽面',
    'yj.kaiRong': '開容',
    'yj.xiuFen': '修墳',
    'yj.qiZuan': '啟鉆',
    'yj.poTu': '破土',
    'yj.anZang': '安葬',
    'yj.liBei': '立碑',
    'yj.chengFu': '成服',
    'yj.chuFu': '除服',
    'yj.kaiShengFen': '開生墳',
    'yj.heShouMu': '合壽木',
    'yj.ruLian': '入殮',
    'yj.yiJiu': '移柩',
    'yj.puDu': '普渡',
    'yj.ruZhai': '入宅',
    'yj.anXiang': '安香',
    'yj.anMen': '安門',
    'yj.xiuZao': '修造',
    'yj.qiJi': '起基',
    'yj.dongTu': '動土',
    'yj.shangLiang': '上梁',
    'yj.shuZhu': '豎柱',
    'yj.kaiJing': '開井開池',
    'yj.zuoBei': '作陂放水',
    'yj.chaiXie': '拆卸',
    'yj.poWu': '破屋',
    'yj.huaiYuan': '壞垣',
    'yj.buYuan': '補垣',
    'yj.faMuZuoLiang': '伐木做梁',
    'yj.zuoZhao': '作竈',
    'yj.jieChu': '解除',
    'yj.kaiZhuYan': '開柱眼',
    'yj.chuanPing': '穿屏扇架',
    'yj.gaiWuHeJi': '蓋屋合脊',
    'yj.kaiCe': '開廁',
    'yj.zaoCang': '造倉',
    'yj.saiXue': '塞穴',
    'yj.pingZhi': '平治道塗',
    'yj.zaoQiao': '造橋',
    'yj.zuoCe': '作廁',
    'yj.zhuDi': '築堤',
    'yj.kaiChi': '開池',
    'yj.faMu': '伐木',
    'yj.kaiQu': '開渠',
    'yj.jueJing': '掘井',
    'yj.saoShe': '掃捨',
    'yj.fangShui': '放水',
    'yj.zaoWu': '造屋',
    'yj.heJi': '合脊',
    'yj.zaoChuChou': '造畜稠',
    'yj.xiuMen': '修門',
    'yj.dingSang': '定磉',
    'yj.zuoLiang': '作梁',
    'yj.xiuShi': '修飾垣墻',
    'yj.jiaMa': '架馬',
    'yj.kaiShi': '開市',
    'yj.guaBian': '掛匾',
    'yj.naChai': '納財',
    'yj.qiuCai': '求財',
    'yj.kaiCang': '開倉',
    'yj.maiChe': '買車',
    'yj.zhiChan': '置產',
    'yj.guYong': '雇庸',
    'yj.chuHuoCai': '出貨財',
    'yj.anJiXie': '安機械',
    'yj.zaoCheQi': '造車器',
    'yj.jingLuo': '經絡',
    'yj.yunNiang': '醞釀',
    'yj.zuoRan': '作染',
    'yj.guZhu': '鼓鑄',
    'yj.zaoChuan': '造船',
    'yj.geMi': '割蜜',
    'yj.zaiZhong': '栽種',
    'yj.quYu': '取漁',
    'yj.jieWang': '結網',
    'yj.muYang': '牧養',
    'yj.anDuiWei': '安碓磑',
    'yj.xiYi': '習藝',
    'yj.ruXue': '入學',
    'yj.liFa': '理發',
    'yj.tanBing': '探病',
    'yj.jianGui': '見貴',
    'yj.chengChuan': '乘船',
    'yj.duShui': '渡水',
    'yj.zhenJiu': '針灸',
    'yj.chuXing': '出行',
    'yj.yiXi': '移徙',
    'yj.fenJu': '分居',
    'yj.TiTou': '剃頭',
    'yj.zhengShou': '整手足甲',
    'yj.naChu': '納畜',
    'yj.buZhuo': '捕捉',
    'yj.tianLie': '畋獵',
    'yj.jiaoNiuMa': '教牛馬',
    'yj.huiQinYou': '會親友',
    'yj.fuRen': '赴任',
    'yj.qiuYi': '求醫',
    'yj.zhiBing': '治病',
    'yj.ciSong': '詞訟',
    'yj.qiJiDongTu': '起基動土',
    'yj.poWuHuaiYuan': '破屋壞垣',
    'yj.gaiWu': '蓋屋',
    'yj.zaoCangKu': '造倉庫',
    'yj.liQuanJiaoYi': '立券交易',
    'yj.jiaoYi': '交易',
    'yj.liQuan': '立券',
    'yj.anJi': '安機',
    'yj.huiYou': '會友',
    'yj.qiuYiLiaoBing': '求醫療病',
    'yj.zhuShi': '諸事不宜',
    'yj.yuShi': '餘事勿取',
    'yj.xingSang': '行喪',
    'yj.duanYi': '斷蟻',
    'yj.guiXiu': '歸岫',
    'xx.bi': '畢',
    'xx.yi': '翼',
    'xx.ji': '箕',
    'xx.kui': '奎',
    'xx.gui': '鬼',
    'xx.di': '氐',
    'xx.xu': '虛',
    'xx.wei': '危',
    'xx.zi': '觜',
    'xx.zhen': '軫',
    'xx.dou': '鬥',
    'xx.lou': '婁',
    'xx.liu': '柳',
    'xx.fang': '房',
    'xx.xin': '心',
    'xx.shi': '室',
    'xx.can': '參',
    'xx.jiao': '角',
    'xx.niu': '牛',
    'xx.vei': '胃',
    'xx.xing': '星',
    'xx.zhang': '張',
    'xx.tail': '尾',
    'xx.qiang': '壁',
    'xx.jing': '井',
    'xx.kang': '亢',
    'xx.nv': '女',
    'xx.mao': '昴',
    'sz.chun': '春',
    'sz.xia': '夏',
    'sz.qiu': '秋',
    'sz.dong': '冬',
    'od.first': '孟',
    'od.second': '仲',
    'od.third': '季',
    'yx.shuo': '朔',
    'yx.jiShuo': '既朔',
    'yx.eMeiXin': '蛾眉新',
    'yx.eMei': '蛾眉',
    'yx.xi': '夕',
    'yx.shangXian': '上弦',
    'yx.jiuYe': '九夜',
    'yx.night': '宵',
    'yx.jianYingTu': '漸盈凸',
    'yx.xiaoWang': '小望',
    'yx.wang': '望',
    'yx.jiWang': '既望',
    'yx.liDai': '立待',
    'yx.juDai': '居待',
    'yx.qinDai': '寢待',
    'yx.gengDai': '更待',
    'yx.jianKuiTu': '漸虧凸',
    'yx.xiaXian': '下弦',
    'yx.youMing': '有明',
    'yx.eMeiCan': '蛾眉殘',
    'yx.can': '殘',
    'yx.xiao': '曉',
    'yx.hui': '晦',
    'ny.sangZhe': '桑柘',
    'ny.baiLa': '白蠟',
    'ny.yangLiu': '楊柳',
    'ny.jinBo': '金箔',
    'ny.haiZhong': '海中',
    'ny.daHai': '大海',
    'ny.shaZhong': '沙中',
    'ny.luZhong': '爐中',
    'ny.shanXia': '山下',
    'ny.daLin': '大林',
    'ny.pingDi': '平地',
    'ny.luPang': '路旁',
    'ny.biShang': '壁上',
    'ny.jianFeng': '劍鋒',
    'ny.shanTou': '山頭',
    'ny.fuDeng': '覆燈',
    'ny.jianXia': '澗下',
    'ny.tianHe': '天河',
    'ny.chengTou': '城頭',
    'ny.daYi': '大驛',
    'ny.chaiChuan': '釵釧',
    'ny.quanZhong': '泉中',
    'ny.daXi': '大溪',
    'ny.wuShang': '屋上',
    'ny.piLi': '霹靂',
    'ny.tianShang': '天上',
    'ny.songBo': '鬆柏',
    'ny.shiLiu': '石榴',
    'ny.changLiu': '長流',
  });

  const now = new Date();

  const state = reactive({
    lang: I18n.getLanguage(),
    year: now.getFullYear(),
    month: now.getMonth() + 1,
    day: now.getDate(),
    yearGanZhi: '',
    yearShengXiao: '',
    yearNaYin: '',
    lunarYearInChinese: '',
    lunarMonthInChinese: '',
    lunarDayInChinese: '',
    yearZhiShui: '',
    yearGenTian: '',
    yearDeJin: '',
    yearFenBing: '',
    yearKongWang: '',
    monthGanZhi: '',
    monthShengXiao: '',
    monthNaYin: '',
    monthTaiShen: '',
    monthKongWang: '',
    dayGanZhi: '',
    dayShengXiao: '',
    dayNaYin: '',
    dayTaiShen: '',
    dayZhiShen: '',
    dayChong: '',
    dayTianShen: '',
    daySha: '',
    dayLu: '',
    dayJiShen: new Array<string>(),
    dayXiongSha: new Array<string>(),
    dayYi: new Array<string>(),
    dayJi: new Array<string>(),
    dayKongWang: '',
    dayJiuXing: '',
    prevJq: '',
    nextJq: '',
    pengZuGan: '',
    pengZuZhi: '',
    liuYao: '',
    yueXiang: '',
    yueMing: '',
    wuHou: '',
    weekInChinese: '',
    xingZuo: '',
    xiu: '',
    positionFu: '',
    positionCai: '',
    positionXi: '',
    positionYangGui: '',
    positionYinGui: '',
  });

  const model = reactive({
    year: '',
    month: '',
    day: '',
  });

  function render() {
    model.year = state.year + '';
    model.month = state.month + '';
    model.day = state.day + '';
    const solar = Solar.fromYmd(state.year, state.month, state.day);

    state.weekInChinese = solar.getWeekInChinese();
    state.xingZuo = solar.getXingZuo();

    const lunar = solar.getLunar();
    state.yearGanZhi = lunar.getYearInGanZhi();
    state.yearShengXiao = lunar.getYearShengXiao();
    state.yearNaYin = lunar.getYearNaYin();
    state.lunarYearInChinese = lunar.getYearInChinese();
    state.yearKongWang = lunar.getYearXunKong();

    state.monthGanZhi = lunar.getMonthInGanZhi();
    state.monthShengXiao = lunar.getMonthShengXiao();
    state.monthNaYin = lunar.getMonthNaYin();
    state.monthTaiShen = lunar.getMonthPositionTai();
    state.lunarMonthInChinese = lunar.getMonthInChinese();
    state.monthKongWang = lunar.getMonthXunKong();

    state.yueXiang = lunar.getYueXiang();
    state.wuHou = lunar.getHou() + ' ' + lunar.getWuHou();
    state.yueMing = lunar.getSeason();

    state.dayGanZhi = lunar.getDayInGanZhi();
    state.dayShengXiao = lunar.getDayShengXiao();
    state.dayNaYin = lunar.getDayNaYin();
    state.dayTaiShen = lunar.getDayPositionTai();
    state.pengZuGan = lunar.getPengZuGan();
    state.pengZuZhi = lunar.getPengZuZhi();
    state.dayZhiShen = lunar.getZhiXing();
    state.dayTianShen = lunar.getDayTianShen() + '(' + lunar.getDayTianShenType() + '日)';
    state.daySha = lunar.getDaySha();
    state.liuYao = lunar.getLiuYao();
    state.dayLu = lunar.getDayLu();
    state.dayJiShen = lunar.getDayJiShen();
    state.dayXiongSha = lunar.getDayXiongSha();
    state.dayYi = lunar.getDayYi();
    state.dayJi = lunar.getDayJi();
    state.lunarDayInChinese = lunar.getDayInChinese();

    const dayNineStar = lunar.getDayNineStar();
    state.dayJiuXing = dayNineStar.toString();

    const prevJq = lunar.getPrevJieQi(true);
    const prevJqSolar = prevJq.getSolar();
    state.prevJq =
      prevJq.getName() +
      '：' +
      prevJqSolar.toYmd() +
      ' ' +
      I18n.getMessage('my.zhou') +
      prevJqSolar.getWeekInChinese();

    const nextJq = lunar.getNextJieQi(true);
    const nextJqSolar = nextJq.getSolar();
    state.nextJq =
      nextJq.getName() +
      '：' +
      nextJqSolar.toYmd() +
      ' ' +
      I18n.getMessage('my.zhou') +
      nextJqSolar.getWeekInChinese();

    state.dayChong = lunar.getDayShengXiao() + '日冲' + lunar.getDayChongDesc();
    state.dayKongWang = lunar.getDayXunKong();

    state.xiu =
      lunar.getGong() +
      '方' +
      lunar.getXiu() +
      lunar.getZheng() +
      lunar.getAnimal() +
      '(' +
      lunar.getXiuLuck() +
      ')';

    state.positionXi = lunar.getPositionXiDesc();
    state.positionFu = lunar.getPositionFuDesc();
    state.positionCai = lunar.getPositionCaiDesc();
    state.positionYangGui = lunar.getPositionYangGuiDesc();
    state.positionYinGui = lunar.getPositionYinGuiDesc();

    const lunarYear = LunarYear.fromYear(lunar.getYear());
    state.yearZhiShui = lunarYear.getZhiShui();
    state.yearDeJin = lunarYear.getDeJin();
    state.yearGenTian = lunarYear.getGengTian();
    state.yearFenBing = lunarYear.getFenBing();
  }

  render();

  function nextDay() {
    const solar = Solar.fromYmd(state.year, state.month, state.day).next(1);
    state.year = solar.getYear();
    state.month = solar.getMonth();
    state.day = solar.getDay();
    render();
  }

  function prevDay() {
    const solar = Solar.fromYmd(state.year, state.month, state.day).next(-1);
    state.year = solar.getYear();
    state.month = solar.getMonth();
    state.day = solar.getDay();
    render();
  }

  const init = (y: number, m: number, d: number, l: string) => {
    const now = new Date();
    state.year = y == 0 ? now.getFullYear() : y;
    state.month = m == 0 ? now.getMonth() + 1 : m;
    state.day = d == 0 ? now.getDate() : d;
    const ll = l == 'zh_CN' ? 'chs' : l;
    setLang(ll);
    render();
  };

  function setLang(lang: string) {
    state.lang = lang;
    I18n.setLanguage(lang);
    render();
  }

  defineExpose({
    init,
  });
</script>

<style lang="scss" scoped>
  .almanac * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .almanac {
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    color: #222222;
    width: 100%;
    border: 2px solid #f6d07b;
    display: flex;
    flex-direction: row;
    justify-content: center;

    > div {
      flex: 1.2;
      overflow: hidden;
    }

    .center {
      flex: 2;
    }

    .border-bottom {
      border-bottom: 1px solid #f4c493;
    }

    .border-right {
      border-right: 1px solid #f4c493;
    }

    .bg {
      background-color: #fcf8ef;
    }

    .lunar {
      height: 60px;
      line-height: 60px;
    }

    .row {
      height: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;

      > div {
        flex: 1;
      }
    }

    .col {
      flex-direction: row;
    }

    div.label {
      font-size: 16px;
      font-weight: bold;
      color: #bc2f3f;
      width: 80px;
      text-align: left;
      flex: none;
      text-indent: 10px;
    }

    .grid {
      height: 182px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      .col2 {
        flex: 1;
        width: 50%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        > div {
          flex: auto;
        }

        > div.bar {
          flex: none;
          width: 30px;
          margin-left: 20px;
        }

        div.label {
          color: #000000;
        }
      }
    }

    .yj-container {
      height: 180px;
      overflow: hidden;

      .yj {
        margin: 20px auto;
        position: relative;
        width: 36px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border-radius: 50%;
        color: #ffffff;
      }

      .yj::before,
      .yj::after {
        position: absolute;
        content: '';
        left: -2px;
        top: -2px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        z-index: -1;
      }

      .yj::after {
        width: 44px;
        height: 44px;
        z-index: -2;
      }

      .yi {
        background: #5cb85c;
      }

      .ji {
        background: #d9534f;
      }

      .yi::before,
      .ji::before {
        background: #ffffff;
      }

      .yi::after,
      .ji::after {
        left: -4px;
        top: -4px;
      }

      .yi::after {
        background: #5cb85c;
      }

      .ji::after {
        background: #d9534f;
      }
    }

    .js {
      height: 165px;
      overflow: hidden;
      .label {
        margin-top: 10px;
      }
    }
    .yj-container,
    .js {
      ul {
        li {
          list-style: none;
          float: left;
          width: 25%;
          height: 32px;
          line-height: 32px;
          white-space: nowrap;
        }
      }
    }

    .today {
      margin: 0 auto;
      width: 400px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-size: 120px;
      font-weight: bold;
      color: #bc2f3f;
      line-height: 177px;
      align-items: center;

      a {
        width: 0;
        height: 0;
        border: 30px solid transparent;
        font-size: 0;
        line-height: 0;
      }

      a.prev {
        border-right-color: #bc2f3f;
      }

      a.next {
        border-left-color: #bc2f3f;
      }
    }

    .bar {
      position: relative;
      width: 30px;
      height: 120px;
      color: #ffffff;
      text-align: center;
      background: #bc2f3f;
      display: flex;
      align-items: center;
      border-radius: 6px;
    }

    .bar::before,
    .bar::after {
      content: '';
      position: absolute;
      left: 50%;
      top: -6px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #bc2f3f;
      margin-left: -8px;
    }

    .bar::after {
      top: auto;
      bottom: -6px;
    }

    .inputs {
      position: relative;
      display: flex;
      padding: 20px;

      div {
        position: relative;
        flex: 1;
      }

      input,
      select {
        border: 1px solid #d7d9e0;
        box-sizing: border-box;
        padding: 7px;
        border-radius: 6px;
        line-height: 1;
        position: relative;
        background: #ffffff;
        width: 80px;
        margin-right: 6px;
        text-align: center;
        font-size: 20px;
        outline: none;
      }

      select {
        appearance: none;
      }
    }
  }
</style>
